<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
  </ul>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 1. ---------------- 创建元素 ----------------------
    // let li = $('<li><a href="#">我是第一个孩子</a></li>');
    // let li2 = $('<li>我是最后一个孩子</li>');

    // 2. ---------------- 添加元素 ----------------------
    // 2.1）内部添加 -- 添加到开头
    // $('ul').prepend(li);
    // $('ul').prepend('<li>第一个</li>');
    $('<li>第1个</li>').prependTo($('ul'));
    // 2.1）内部添加 -- 添加到结尾
    // $('ul').prepend(li);
    // $('ul').append('<li>最后一个</li>');
    $('<li>最后一个gege</li>').appendTo($('ul'));

    // 2.3 添加兄弟元素 --- 添加到之前
    $('ul').before('<div>sssss</div>');
    // 2.4 添加兄弟元素 --- 添加到之后
    $('ul').after('<p>是算得上是的</p>');


  </script>
</body>

</html>